<template>
  <el-main>
    <!-- 搜索 -->
    <el-form :model="searchParm" label-width="80px" :inline="true" size="default">
      <el-form-item>
        <el-input v-model="searchParm.title" placeholder="请输入标题"></el-input>
      </el-form-item>
      <el-form-item label="类型">
        <el-select v-model="searchParm.type" clearable placeholder="请选择类型">
          <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button icon="Search" @click="searchBtn">搜索</el-button>
        <el-button plain type="danger" icon="Close" @click="resetBtn">重置</el-button>
        <el-button type="primary" icon="Plus" @click="addBtn">新增</el-button>
      </el-form-item>
    </el-form>
    <!-- 表格 -->
    <el-table :height="tableHeight" :data="tableList" border stripe>
      <el-table-column prop="image" label="图片">
        <template #default="scope">
          <el-image style="width: 100px; height: 60px" :src="scope.row.image.split(',')[0]"></el-image>
        </template>
      </el-table-column>
      <el-table-column prop="title" label="标题"></el-table-column>
      <el-table-column prop="type" label="类型">
        <template #default="scope">
          <el-tag v-if="scope.row.type == '0'">活动</el-tag>
          <el-tag type="success" v-if="scope.row.type == '1'">新闻</el-tag>
          <el-tag type="warning" v-if="scope.row.type == '2'">公告</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="hasTop" label="推荐首页">
        <template #default="scope">
          <el-tag type="danger" v-if="scope.row.hasTop == '0'">否</el-tag>
          <el-tag v-if="scope.row.hasTop == '1'">是</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="hasJoin" label="可以报名">
        <template #default="scope">
          <div v-if="scope.row.type == '0'">
            <el-tag type="danger" v-if="scope.row.hasJoin == '0'">不可以</el-tag>
            <el-tag type="success" v-else>可以</el-tag>
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="status" label="审核状态">
        <template #default="scope">
          <div v-if="scope.row.type == '0'">
            <el-tag type="danger" v-if="scope.row.status == '0'">未审核</el-tag>
            <el-tag type="success" v-if="scope.row.status == '1'">已审核</el-tag>
            <el-tag type="warning" v-if="scope.row.status == '2'">已拒绝</el-tag>
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="createTime" label="时间"></el-table-column>
      <el-table-column align="center" width="400" label="操作">
        <template #default="scope">
          <el-button icon="Edit" type="primary" size="default" @click="editBtn(scope.row)">编辑</el-button>
          <el-button icon="Delete" type="danger" size="default" @click="deleteBtn(scope.row)">删除</el-button>
          <el-button v-if="scope.row.type == '0'" icon="Edit" type="warning" size="default"
            @click="exportBtn(scope.row)">导出</el-button>
          <el-button v-if="scope.row.type == '0' && scope.row.status == '0'" icon="Edit" type="warning" size="default"
            @click="applyBtn(scope.row)">审核</el-button>
          <el-button v-if="scope.row.type == '0' && scope.row.status == '0'" icon="Edit" type="danger" size="default"
            @click="returnBtn(scope.row)">拒绝</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <el-pagination @size-change="sizeChange" @current-change="currentChange" :current-page.sync="searchParm.currentPage"
      :page-sizes="[10, 20, 40, 80, 100]" :page-size="searchParm.pageSize"
      layout="total, sizes, prev, pager, next, jumper" :total="searchParm.total" background>
    </el-pagination>
    <!-- 新增弹框 -->
    <AddActivity ref="addActivityRef" @onFresh="getList"></AddActivity>
  </el-main>
</template>
<script setup lang="ts">
import AddActivity from "./AddActivity.vue";
import useActivityTable from "../../composable/activity/useActivityTable";
import useActivity from "../../composable/activity/useActivity";
import { NewsType } from "../../api/news/NewsModel";
import { ElMessage } from "element-plus";
const {
  searchParm,
  searchBtn,
  resetBtn,
  options,
  tableList,
  sizeChange,
  currentChange,
  tableHeight,
  getList,
} = useActivityTable();
const { addBtn, editBtn, deleteBtn, addActivityRef, applyBtn, returnBtn } =
  useActivity(getList);
const exportBtn = (row: NewsType) => {
  if (!row.id) {
    ElMessage.warning("请选择活动");
    return;
  }
  const abtn = document.createElement("a");
  abtn.href =
    process.env.BASE_API + "/api/student/exportActivity?activityId=" + row.id;
  abtn.click();
};
</script>
<style scoped></style>